{% extends "scheduling/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="mb-0">
                <i class="fas fa-toolbox me-2"></i>添加维修记录
            </h3>
        </div>
        <div class="card-body">
            <form method="post" class="needs-validation" novalidate>
                {% csrf_token %}
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="id_bus" class="form-label">车辆</label>
                        <select class="form-select" id="id_bus" name="bus" required>
                            <option value="">请选择车辆</option>
                            {% for bus in buses %}
                                <option value="{{ bus.bus_id }}" {% if bus.is_in_maintenance %}disabled{% endif %}>{{ bus.bus_id }}</option>
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">
                            请选择车辆
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="id_start_date" class="form-label">开始日期</label>
                        <input type="date" class="form-control" id="id_start_date" name="start_date" required 
                               value="{{ today|date:'Y-m-d' }}">
                        <div class="invalid-feedback">
                            请选择开始日期
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="id_end_date" class="form-label">结束日期</label>
                        <input type="date" class="form-control" id="id_end_date" name="end_date">
                        <div class="form-text text-muted">
                            如果维修尚未完成，请留空此字段
                        </div>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="id_reason" class="form-label">维修原因</label>
                        <input type="text" class="form-control" id="id_reason" name="reason" placeholder="请输入维修原因" required>
                        <div class="invalid-feedback">
                            请输入维修原因
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-2"></i>保存记录
                    </button>
                    <a href="{% url 'maintenance_list' %}" class="btn btn-secondary">
                        <i class="fas fa-times me-2"></i>取消
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// 表单验证
(function () {
  'use strict'

  var forms = document.querySelectorAll('.needs-validation')

  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()
</script>
{% endblock %}